<template>
    <el-dialog v-model="isShow" title="新增设计助手" draggable destroy-on-close append-to-body>
        <div class="flex_str_str itemSty">
            <div class="nameSty">方案名称:</div>
            <el-input v-model="params.name" class="itpSty"></el-input>
        </div>
        <div class="flex_str_str itemSty">
            <div class="nameSty">方案金额:</div>
            <el-input v-model="params.price" class="itpSty" type="number"></el-input>
        </div>
        <div class="flex_str_str itemSty">
            <div class="nameSty">金额描述:</div>
            <el-input v-model="params.priceDesc" class="itpSty"></el-input>
        </div>
        <div class="flex_str_str itemSty">
            <div class="nameSty">到期时间:</div>
            <el-date-picker v-model="params.expireDate" type="date" placeholder="选择到期时间" />
        </div>
        <div class="flex_str_str itemSty">
            <div class="nameSty">排序:</div>
            <el-input v-model="params.serialNum" class="itpSty" type="number"></el-input>
            <span style="font-size: 12px;margin-top:8px;">(数字越小越靠前)</span>
        </div>

        <div class="flex_str_str itemSty">
            <div class="nameSty">状态:</div>
            <el-radio-group v-model="params.status" class="ml-4">
                <el-radio label="1" size="large">正常</el-radio>
                <el-radio label="0" size="large">停用</el-radio>
            </el-radio-group>
        </div>
        <div class="flex_str_str itemSty">
            <div class="nameSty">描述信息:</div>
            <textarea class="textSty" v-model="params.description"></textarea>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submitFun">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import { saveDesignApi } from '@/api/index/index'
import { ElMessage } from 'element-plus';
import { formatDayTime } from '@/utils/moment'
const props = defineProps({
    isShow: {
        type: Boolean,
        defaul: false
    }
})
const emit = defineEmits(['close'])
const { isShow } = toRefs(props)
// const radiusVal = ref('1')
const params = reactive({
    name: '',
    price: '',
    priceDesc: '',
    goldCoin: '',
    description: '',
    expireDate: '',
    status: '1',
    serialNum: 0

})
const cancel = () => {
    emit('close')
}
const submitFun = () => {
    params.expireDate = formatDayTime(params.expireDate)
    // console.log(params)
    // return
    saveDesignApi(params).then((res: any) => {
        if (res.status == 200) {
            ElMessage.success(res.message)
            emit('close')
        }
    })
}

</script>
<style scoped>
.textSty {
    width: 400px;
    height: 170px;
    resize: none;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.nameSty {
    width: 130px;
}

.itpSty {
    width: 300px;
}

.itemSty {
    margin: 10px 0;
}
</style>